function sliderValueChanged(firstRun) {
    var year    = timeAct.getFullYear() - $("#yearSlider").slider("option", "value");
    var month0  = $("#monthSlider").slider("values", 0);
    var month1  = $("#monthSlider").slider("values", 1);
    
    var timeStart   = new Date(year, month0, 1);
    var timeEnd     = new Date(year, month1 + 1, 0);
    
    if (firstRun == true && $("#getParamTimeStart").val() != "") {
        year    = $("#getParamTimeStart").val().substr(0, 4);
        month0  = $("#getParamTimeStart").val().substr(5, 2);
        month1  = $("#getParamTimeEnd").val().substr(5, 2);
        
        timeStart   = new Date(year, month0-1, 1);
        timeEnd     = new Date(year, month1, 0);
        
        $("#yearSlider").slider("option", "value", timeAct.getFullYear() - year);
        $("#monthSlider").slider("values", 0, month0-1);
        $("#monthSlider").slider("values", 1, month1-1);
        $("#sliderVal").html(year + " " + months[month0-1] + " - " + months[month1-1]);
    }
    
    
    $("#eventsContent").html('');
    
    $.get(
        $("#controller").val() + "/ajax-get-events",
        {
            timeStart:  parseInt(timeStart.getTime()/1000,10),
            timeEnd:    parseInt(timeEnd.getTime()/1000,10)
        },
        function(res) {
            var events  = $.parseJSON(res);
            var row     = $('<div/>', {'class': 'row'});
            
            for (var i = 0; i < events.length; ++i) {
                // new row
                if (i % 4 == 0) {
                    row     = $('<div/>', {'class': 'row'});
                }
                
                // an event add to row
                row.append(
                renderEvent(events[i].id,
                            events[i].name))
                            .appendTo('#eventsContent');
            }
        })
        .error(function() {alert('ERROR');});
}

function renderEvent(id, name, type, pic) {
    var event = $('<div/>',
                {
                    'class':    'span4',
                    html:       '<br/>' + name,
                    style:      'text-align: center'
                }).prepend(
                    $('<a/>',
                    {
                        'class':    'media-grid2',
                        href:       '#'
                    }).append(
                        $('<img/>',
                        {
                            'class':    'thumbinal',
                            src:        'http://placehold.it/150x100'
                        })));
    return event;
}